<script lang="ts" setup>
import { ref, onMounted } from "vue";
import Table from "@/components/common/MyTable.vue";
import Header from "@/components/common/MyHeader.vue";
import LesseeAddHeader from "@/components/wr/LesseeAddHeader.vue";
import OperationSixthDetail from "@/components/wr/OperationSixthDetail.vue";
import { ElNotification } from 'element-plus'
import service from "@/api";

var lesseeAddFlag = ref(true)
var zujian = [LesseeAddHeader, OperationSixthDetail]
var index = ref()

// 当前单选   最后点击的那个数据
var curent_select:any = ref({})
// 点击全选 所有的数据   点击单选   当前所有选中的数据
var all_select:any = ref([])
// 渲染列表数据
var tableData:any = ref([]);
// 查询  表单数据
var findInfo = ref({
  buildId: ''
})


//单选 
var check = (select, row) => {
  all_select.value = select
  curent_select.value = row
  // console.log(one_all_select.value, curent_select.value);
};
// 多选
var checkAll = (select: any) => {
  all_select.value = select
  // console.log(all_select);
};


// 点击保存按钮(新增页面的)  显示主页面
var showadd = () => {
  lesseeAddFlag.value = true
  get_alldata()
}
// 点击新增按钮
var add = () => {
  lesseeAddFlag.value = false
  index.value = 0
};


//封装函数  获取批量删除请求的参数  
var get_ids = (arr) => {
  var newArr:any = []
  arr.forEach((item:any) => {
    newArr.push(item.tenId)
  })
  return newArr.join(',')
}
// 点击批量删除按钮  deletefew  
var del = async () => {
  // console.log(get_ids(all_select.value));
  // 批量删除
  var res = await service.tenantInformationTable.tenantInformationTable_deletefew({ ids: get_ids(all_select.value) })
  if (res.status == 200) {
    get_alldata()
  }
  ElNotification.closeAll()
  ElNotification({
    message: '已删除',
    type: 'success',
  })
};
// 删除单个信息  deleteById
var del_one = async () => {
  // 通过id删除商品
  var res:any = await service.tenantInformationTable.tenantInformationTable_deleteById({ id: curent_select.value.tenId })
  if (res.status == 200) {
    get_alldata()
  }
  ElNotification.closeAll()
  ElNotification({
    message: '已删除',
    type: 'success',
  })
}


// 封装函数  获取通过id找数据请求的参数
var get_id = (arr) => {
  var new_arr = arr.filter((item) => item.buildId == findInfo.value.buildId)
  return new_arr[0].tenId
}
// 点击查询   通过id获取信息  queryById
var find_data = async () => {
  // 通过id获取信息   
  var res = await service.tenantInformationTable.tenantInformationTable_queryById({ id: get_id(tableData.value) })
  if (res.status == 200) {
    tableData.value= [res.data]
  }
}
// 点击重置
var reset_data = () => {
  get_alldata()
}

// 点击详情
var mes_detail = () => {
  lesseeAddFlag.value = false
  index.value = 1
}

// 租户信息管理  所有请求
onMounted(() => {
  // 获取所有租户信息
  get_alldata()
})
// 获取所有租户信息请求  之前是queryByPage  后来改为queryAll
var get_alldata = async () => {
  var res = await service.tenantInformationTable.tenantInformationTable_queryByPage({ page: 1, pageSize: 100 })
  if (res.data.code == 0) {
    tableData.value = res.data.data
  }
}


</script>
<template>
  <!-- 租户信息管理 -->
  <div class="tenement_sixth" v-show="lesseeAddFlag">
    <!-- 头部包含了新增  批量删除 -->
    <Header title="租户信息管理" @del="del" @add="add" />

    <!-- 内容部分 -->
    <div class="main">
      <!-- 表单部分 -->
      <div class="nav">
        <div class="kuang">
          <el-form class="form" :model="findInfo">
            <!-- 表单  输入框 下拉菜单部分 -->
            <div class="left">
              <div class="item">
                <span>租户名称：</span>
                <el-input placeholder="请输入租户名称" v-model="findInfo.buildId" />
              </div>
              <div class="select">
                <span>所属楼宇：</span>
                <el-select placeholder="请选择">
                  <el-option label="A1幢" value="A1" />
                  <el-option label="B2幢" value="B2" />
                  <el-option label="C3幢" value="C3" />
                </el-select>
              </div>
              <div class="item">
                <span>房间名称：</span>
                <el-input placeholder="请输入房间名称" />
              </div>
              <div class="item">
                <span>社会信用代码：</span>
                <el-input placeholder="请输入统一社会信用代码" />
              </div>
              <div class="item">
                <span>负责人姓名：</span>
                <el-input placeholder="请输入负责人姓名" />
              </div>
              <div class="item">
                <span>联系方式：</span>
                <el-input placeholder="请输入联系方式" />
              </div>
            </div>
            <!-- 表单   查询 重置 按钮-->
            <div class="btns">
              <el-button type="success" class="chaxun" @click="find_data">查询</el-button>
              <el-button type="info" plain @click="reset_data">重置</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <!-- 表格部分 -->
      <div class="tableBox">
        <Table :data="tableData" @check="check" @check-all="checkAll"
          :keys="['flex', 'buildId', 'build', 'roomName', 'socialCode', 'responseName', 'telephone', 'time',]"
          :label="['值', '租户名称', '所属楼宇', '房间名称', '社会信用代码', '负责人姓名', '联系方式', '注册时间',]">
          <template #btn>
            <span style="cursor: pointer;" @click="mes_detail">详情</span>&emsp;&emsp;
            <span style="cursor: pointer;" @click="del_one">删除</span>
          </template>
        </Table>
      </div>
    </div>

  </div>

  <!-- 租户信息新增 -->
  <keep-alive include="LesseeAddHeader,OperationSixthDetail" exclude="">
    <component :is="zujian[index]" v-show="!lesseeAddFlag" @show-add="showadd" />
  </keep-alive>
</template>
<style scoped lang="scss">
@import '@/saas/Table.scss';
</style>
